<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <style>
        html,body,#container {width:100%;height:100%;}
    </style>
    <title>选取配送范围</title>
    <link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" />
    <script src="https://webapi.amap.com/maps?v=1.4.15&key=53ab133fb528b1d2ca21e42d81bf1871&plugin=AMap.PolyEditor"></script>
    <script src="https://a.amap.com/jsapi_demos/static/demo-center/js/demoutils.js"></script>
</head>
<body>
<div id="container"></div>
<div class="input-card" style="width: 120px">
    <button type="button" class="btn" onclick="closeWin()">选取完毕</button>
</div>
<script type="text/javascript">
    {if $row.lng && $row.lat}
    var map = new AMap.Map("container", {
        resizeEnable: true,
        center: [{$row.lng}, {$row.lat}],
        zoom: 13
    });
    {else/}
    var map = new AMap.Map("container", {
        resizeEnable: true,
        zoom: 13
    });
    {/if}

    {if $row.area}
    var path = {$row.area};
    {else/}
    var path = [];
    {/if}
	
    var path_other = {$row_other_list};
    var path_other_list = [];
    if(path_other.length>0){
        path_other.map(function(item, index){
            console.log(eval(item));
			path_other_list.push(eval(item));
        })
    }
	
	//批量画每个区域的覆盖面积
	path_other_list.map(function(item, index){
		//添加其他其余的覆盖面积
		var path = [];
		item && item.map(function(item2, index2){
			var ii = new AMap.LngLat(item2[0],item2[1]); 
			path.push(ii);
		})
		var polygon = new AMap.Polygon({
			path: path,
			strokeColor: "#000", 
			strokeWeight: 1,
			strokeOpacity: 1,
			fillOpacity: 0.4,
			fillColor: '#000',
			zIndex: 50,
		})
		map.add(polygon);
	})

    var polyEditor;
    if (path.length < 3) {
        var marksNum = 0;
        var marksArr = [];
        var clickListener = AMap.event.addListener(map, "click", mapOnClick);
    } else {
        var polygon = createPolygon(path);
        createEditor(polygon);
    }

    function mapOnClick(e) {
        path.push(e.lnglat);
        marksArr.push(addMarker(e.lnglat));
        marksNum++;
        if(marksNum === 3){
            AMap.event.removeListener(clickListener);
            var polygon = createPolygon(path);
            createEditor(polygon);
            map.remove(marksArr);
        }
    }

    function createPolygon(pathArr) {
        return new AMap.Polygon({
            map: map,
            path: pathArr,
            strokeColor: "#FF33FF",
            strokeWeight: 3,
            strokeOpacity: 1,
            fillOpacity: 0.3,
            fillColor: '#f5deb3',
            zIndex: 50,
        });
    }

    function createEditor(polygon) {
        polyEditor = new AMap.PolyEditor(map, polygon);
        polyEditor.open();
        polyEditor.on('end', closeEditor);
    }

    function closeEditor(e) {
        var points = e.target.getPath();
        var len  = points.length;
        var area = [];
        for (var i = 0; i < len; i++) {
            area.push([points[i].lng, points[i].lat]);
        }
        parent.document.getElementById("c-area").value = JSON.stringify(area);
        parent.Layer.closeAll();
    }

    function closeWin() {
        if (polyEditor) {
            polyEditor.close();
        } else {
            parent.Layer.closeAll();
        }
    }

    function addMarker(lnglat) {
        var marker = new AMap.Marker({
            icon: "/assets/img/site/mark.png",
            position: lnglat
        });
        marker.setMap(map);
        return marker;
    }
</script>
</body>
</html>